<template>
  <div class="ReservationCardManagement">
    <el-card class="classificationBox">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="个人技能" name="1">
          <el-button
            class="btn"
            icon="el-icon-plus"
            @click="addskillCardBtn"
            :disabled="total >= 12 ? true : false"
            >新增 {{ total + "/12" }}</el-button
          >

          <el-table :data="tableData" v-loading="loading" style="width: 100%">
            <el-table-column label="图标">
              <template slot-scope="scope">
                <div @click="upImg(scope.row)">
                  <el-upload
                    class="avatar-uploader"
                    :http-request="upLoad"
                    :on-preview="handlePictureCardPreview"
                    :on-success="handleAvatarSuccess"
                    :show-file-list="false"
                    action
                  >
                    <img
                      v-if="scope.row.icon"
                      :src="scope.row.icon"
                      class="avatar"
                      style="width: 80px; height: 80px"
                    />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <!-- <img :src="scope.row.icon" class="img" preview /> -->
                </div>
              </template>
            </el-table-column>

            <el-table-column label="文案">
              <template slot-scope="scope">
                <!-- <span style="margin-left: 10px">{{ scope.row.name }}</span> -->
                <el-input
                  v-model="scope.row.name"
                  placeholder="请输入内容"
                ></el-input>
              </template>
            </el-table-column>

            <el-table-column label="选中颜色">
              <template slot-scope="scope">
                <div class="box">
                  <!-- <span>{{ scope.row.base_color }}</span> -->
                  <el-input
                    v-model="scope.row.base_color"
                    placeholder="请输入背景颜色"
                  ></el-input>
                  <el-color-picker
                    v-model="scope.row.base_color"
                  ></el-color-picker>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="skillCardDelete(scope.row)"
                  >删除</el-button
                >
                <el-button size="mini" @click="skillCardEdit(scope.row)"
                  >更新</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="page"
            :limit.sync="pageSize"
            @pagination="getList"
          />
          <!-- <el-button
            class="btn"
            icon="el-icon-plus"
            @click="addskillCardBtn"
            :disabled="total >= 12 ? true : false"
            >新增 {{ total + "/12" }}</el-button
          > -->
          <!-- 新增卡片 -->
          <el-dialog
            :title="skillCard"
            :visible.sync="dialogVisibleCard"
            width="30%"
          >
            <div class="addCard">
              <p>
                <span class="moodSpan">图标</span>
                <el-upload
                  class="avatar-uploader"
                  :http-request="upLoad"
                  :on-preview="handlePictureCardPreview"
                  :on-success="handleAvatarSuccess"
                  :show-file-list="false"
                  action
                >
                  <img
                    v-if="dialogImageUrl"
                    :src="dialogImageUrl"
                    class="avatar"
                    style="width: 80px; height: 80px"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </p>
              <p>
                <span class="moodSpan">名称</span>
                <el-input v-model="name" placeholder="请输入名称"></el-input>
              </p>
              <p>
                <span class="moodSpan">选中颜色</span>
                <el-input
                  style="width: 200px"
                  v-model="base_color"
                  placeholder="请输入背景色"
                ></el-input>
                <el-color-picker v-model="base_color"></el-color-picker>
                <span class="colo_span">{{ base_color }}</span>
              </p>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisibleCard = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisibleSkillCardBtn"
                >确 定</el-button
              >
            </span>
          </el-dialog>
        </el-tab-pane>
        <el-tab-pane label="聊天话题" name="2">
          <div>
            <div class="addBox">
              <el-button style="magin-left: 20px" @click="batchDel"
                >全部删除</el-button
              >
              <!-- <el-button style="margin-right: 10px">导入表格</el-button> -->
              <upload-excel-component
                :on-success="handleSuccess"
                :before-upload="beforeUpload"
              />

              <el-button
                class="btn"
                icon="el-icon-plus"
                @click="isShow = !isShow"
                >新增</el-button
              >
              <el-input v-model="input" v-show="isShow"></el-input>
              <el-button class="btn" v-show="isShow" @click="addTalk"
                >确定</el-button
              >
            </div>

            <el-table
              ref="multipleTable"
              tooltip-effect="dark"
              :data="talkTableData"
              v-loading="talkLoading"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column label="话题">
                <template slot-scope="scope" style="display: flex">
                  <el-input v-model="scope.row" disabled></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="talkHandleDelete(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>

        <el-tab-pane label="约会时间" name="3">
          <div>
            <div class="addBox">
              <el-button class="btn" icon="el-icon-plus" @click="addDateTimeBtn"
                >新增</el-button
              >
            </div>

            <el-table
              :data="dateTimeTableData"
              v-loading="dateTimeLoading"
              style="width: 100%"
            >
              <el-table-column label="优先展示数">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.sort"
                    placeholder="输入优先展示数"
                    oninput="value=value.replace(/[^\d]/g,'')"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="时间">
                <template slot-scope="scope">
                  <el-time-picker
                    format="HH:mm"
                    value-format="HH:mm"
                    v-model="scope.row.timing"
                    placeholder="输入任意时间点"
                  >
                  </el-time-picker>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="engageTimeDelTimeListBtn(scope.row)"
                    >删除</el-button
                  >
                  <el-button
                    size="mini"
                    @click="engageTimeEditTimeListBtn(scope.row)"
                    >{{ scope.row.id == "" ? "确认" : "更新" }}</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="感谢文案" name="4">

          <div>
            <div class="addBox">
              <el-button style="magin-left: 20px" @click="batchDel"
                >全部删除</el-button
              >
            
              <upload-excel-component
                :on-success="handleSuccess"
                :before-upload="beforeUpload"
              />

              <el-button
                class="btn"
                icon="el-icon-plus"
                @click="isShow = !isShow"
                >新增</el-button
              >
              <el-input v-model="input" v-show="isShow"></el-input>
              <el-button class="btn" v-show="isShow" @click="addTalk"
                >确定</el-button
              >
            </div>

            <el-table
              ref="multipleTable"
              tooltip-effect="dark"
              :data="talkTableData"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column label="话题">
                <template slot-scope="scope" style="display: flex">
                  <el-input v-model="scope.row" disabled></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="talkHandleDelete(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane> -->
        <el-tab-pane label="个人标签" name="4">
          <el-button
            class="btn"
            icon="el-icon-plus"
            @click="personalAdd"
            :disabled="personalTotal >= 12"
            >新增 {{ personalTotal + "/12" }}</el-button
          >
          <el-table
            :data="personalTableData"
            v-loading="personalLoading"
            style="width: 100%"
          >
            <el-table-column label="文案">
              <template slot-scope="scope">
                <!-- <span style="margin-left: 10px">{{ scope.row.name }}</span> -->
                <el-input
                  v-model="scope.row.title"
                  placeholder="请输入内容"
                ></el-input>
              </template>
            </el-table-column>

            <el-table-column label="KEY">
              <template slot-scope="scope">
                <!-- <span style="margin-left: 10px">{{ scope.row.name }}</span> -->
                <el-input
                  v-model="scope.row.key"
                  placeholder="请输入内容"
                ></el-input>
              </template>
            </el-table-column>

            <el-table-column label="选中颜色">
              <template slot-scope="scope">
                <div class="box">
                  <!-- <span>{{ scope.row.base_color }}</span> -->
                  <el-input
                    v-model="scope.row.color"
                    placeholder="请输入背景颜色"
                  ></el-input>
                  <el-color-picker v-model="scope.row.color"></el-color-picker>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="personalEdit(scope.$index, scope.row)"
                  >删除</el-button
                >
                <el-button size="mini" @click="personalConfirm(scope.row)"
                  >更新</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- <pagination
            v-show="personalTotal > 0"
            :total="personalTotal"
            :page.sync="personalPage"
            :limit.sync="personalPageSize"
            @pagination="personalGetList"
          /> -->
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import { client } from "@/utils/oss.js";
import { ossToken } from "@/api/NotificationManagement";
import UploadExcelComponent from "@/components/UploadExcel/index.vue";
import {
  appointmentcardList,
  appointmentcardListDel,
  appointmentcardListAdd,
  appointmentcardEdit,
  globalsetChatTopic,
  globalsetEditChatTopic,
  engageTimeTimeList,
  engageTimeAddTimeList,
  engageTimeEditTimeList,
  engageTimeDelTimeList,
  reversePerson_api,
  getPerson_api,
} from "@/api/operationManagement";

export default {
  components: { Pagination, UploadExcelComponent },
  inject: ["reload"],
  data() {
    return {
      personalTableData: [
        {
          key: "",
          title: "",
          color: "",
        },
      ],
      personalTotal: 0,
      personalPage: 1,
      personalPageSize: 10,
      personalLoading: false,
      loading: true,
      talkLoading: true,
      dateTimeLoading: true,
      multipleSelection: [],
      checked: false,
      dialogImageUrl: "",
      rowImg: [],
      img: "",
      name: "", //名称
      base_color: "",
      id: "",
      // sex: 1,
      //技能卡片下拉框
      skillCard: "新增卡片",
      tableData: [],
      dialogVisibleCard: false,
      total: 0,
      page: 1, //页码
      pageSize: 10, //每页条数
      activeName: "1",

      //聊天话题
      talkTableData: [],
      input: "",
      isShow: false,

      //约会时间
      dateTimeTableData: [
        {
          sort: "",
          val: "",
        },
      ],
      val: "",
    };
  },
  methods: {
    // 个人标签确定更新
    async personalConfirm(row) {
      let arr = this.personalTableData;
      let { code, data } = await reversePerson_api({
        content: arr,
      });
      if (code == 0) {
        this.$message({
          type: "success",
          message: "更新成功",
        });
        this.getPersonList();
      }
    },
    // 个人标签获取
    async getPersonList() {
      let { code, data } = await getPerson_api({});
      if (code == 0) {
        console.log(data, "person");
        this.personalTableData = data;
        this.personalTotal = data.length;
      }
    },
    // 个人标签删除
    personalEdit(index, row) {
      // console.log(row.id);
      this.$confirm("此操作将删除该条信息，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.personalTableData.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });1
          this.personalConfirm();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      // if (row.id == "") {
      //   this.personalTableData.forEach((item, index) => {
      //     if (
      //       item.id == row.id &&
      //       item.name == row.name &&
      //       item.base_color == row.base_color
      //     ) {
      //       this.personalTableData.splice(index, 1);
      //       this.$message({
      //         message: "取消成功",
      //         type: "success",
      //       });
      //     }
      //   });
      // } else {
      //   // 调接口
      // }
    },
    // 个人标签新增
    personalAdd() {
      this.personalTableData.unshift({
        color: "",
        key: "",
        title: "",
      });
    },
    // 个人标签分页
    personalGetList() {},
    //导入表格
    beforeUpload(file) {
      console.log(file);
      return true;
      // const isLt1M = file.size / 1024 / 1024 < 1
      // if (isLt1M) {
      //   return true
      // }
      // this.$message({
      //   message: 'Please do not upload files larger than 1m in size.',
      //   type: 'warning'
      // })
      // return false
    },
    handleSuccess({ results, header }) {
      let arr = [];
      console.log("结果", results, header);
      results.forEach((item) => {
        // console.log(item[key]);
        for (let key in item) {
          arr.push(item[key]);
        }
        // arr.push(item.item[key]);
        console.log(arr);
      });
      this.talkTableData = [...arr, ...this.talkTableData];
      console.log(this.talkTableData);
      globalsetEditChatTopic({
        content: this.talkTableData,
      }).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: "导入成功",
            type: "success",
          });

          this.globalsetChatTopic();
        }
      });
      this.tableData = results;
      this.tableHeader = header;
    },

    // 全选
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      let arr = [];
      this.talkTableData.forEach((item) => {
        if (val.indexOf(item) == -1) {
          arr.push(item);
        }
      });
      this.multipleSelection = arr;
    },
    //列表
    appointmentcardList() {
      this.loading = true;
      appointmentcardList({
        page: this.page,
        pageSize: this.pageSize,
        // sex: this.sex,
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = parseInt(res.data.count);
          this.loading = false;
        }
      });
    },
    //删除按钮
    skillCardDelete(row) {
      this.$confirm("此操作将删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          appointmentcardListDel({
            id: row.id,
          }).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //技能卡片新增按钮
    addskillCardBtn() {
      this.skillCard = "新增卡片";
      this.dialogVisibleCard = true;
      this.name = "";
      this.base_color = "";
      this.dialogImageUrl = "";
      this.id = "";
    },
    //技能卡片编辑按钮
    skillCardEdit(row) {
      // this.skillCard = "编辑卡片";
      // this.dialogVisibleCard = true;
      // this.name = row.name;
      // this.base_color = row.base_color;
      // this.img = row.icon;
      // // this.dialogImageUrl = row.icon;
      // this.id = row.id;
      console.log(row);
      appointmentcardEdit({
        base_color: row.base_color,
        icon: row.iconB ? row.iconB : row.icon,
        name: row.name,
        id: row.id,
      }).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: "更新成功",
            type: "success",
          });
          this.getList();
        }
      });
    },
    //技能卡片确认按钮
    dialogVisibleSkillCardBtn() {
      if (this.skillCard == "新增卡片") {
        if (this.base_color == "" || this.img == "" || this.name == "") {
          this.$message({ type: "error", message: "所有内容不能为空！" });
          return;
        }
        appointmentcardListAdd({
          base_color: this.base_color,
          icon: this.img,
          name: this.name,
          // id: this.id,
          // sex: this.sex,
        }).then((res) => {
          if (res.code == 0) {
            this.$message({
              message: "新增成功",
              type: "success",
            });
            this.getList();
            this.dialogVisibleCard = false;
            this.base_color = "";
            this.img = "";
            // this.sex = "";
          }
        });
      } else {
        appointmentcardEdit({
          base_color: this.base_color,
          icon: this.rowImg.iconB,
          name: this.name,
          id: this.id,
        }).then((res) => {
          if (res.code == 0) {
            this.$message({
              message: "更新成功",
              type: "success",
            });
            this.getList();
            this.dialogVisibleCard = false;
            this.base_color = "";
            this.img = "";
            // this.sex = "";
            this.id = "";
          }
        });
      }
    },
    //分页
    getList() {
      this.loading = true;
      this.appointmentcardList();
    },
    upImg(row) {
      this.rowImg = row;
    },
    handleAvatarSuccess(res, file) {
      this.dialogImageUrl = URL.createObjectURL(file.raw);
      this.rowImg.icon = URL.createObjectURL(file.raw);
    },
    //覆盖默认的上传行为，自定义上传的实现
    async upLoad(file) {
      await ossToken({
        type: 0,
      }).then((res) => {
        if (res.code == 0) {
          this.dataObj = {
            accessKeyId: res.data.accessKey,
            accessKeySecret: res.data.accessSecret,
            securityToken: res.data.token,
            region: "oss-" + res.data.regionId,
            bucket: res.data.bucket,
          };
        }
      });
      const self = this;
      try {
        let fileNames =
          "/img/" +
          Math.round(new Date() / 1000) +
          "." +
          file.file.name.substring(file.file.name.lastIndexOf(".") + 1);
        this.img = fileNames;
        this.rowImg.iconB = fileNames;
        console.log(this.rowImg);
        //fileNames上传文件的名称
        //file.file上传文件的内容
        let cli = client(this.dataObj);
        let result = cli.multipartUpload(fileNames, file.file);
        self.$message({
          message: "上传成功",
          type: "success",
        });
        // appointmentcardEdit({
        //   base_color: this.rowImg.base_color,
        //   icon: this.rowImg.iconB,
        //   name: this.rowImg.name,
        //   id: this.rowImg.id,
        // }).then((res) => {
        //   if (res.code == 0) {
        //     this.$message({
        //       message: "更新成功",
        //       type: "success",
        //     });
        //     // this.reload();
        //   }
        // });
      } catch (e) {
        self.$message.error("上传失败");
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
    },

    //聊天话题
    //话题列表
    globalsetChatTopic() {
      this.talkLoading = true;
      globalsetChatTopic({}).then((res) => {
        if (res.code == 0) {
          this.talkTableData = res.data;
          this.talkLoading = false;
        }
      });
    },
    // 批量删除
    batchDel() {
      globalsetEditChatTopic({
        content: this.multipleSelection,
      }).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: "批量删除成功",
            type: "success",
          });
          this.globalsetChatTopic();
        }
      });
    },
    //删除按钮
    talkHandleDelete(row) {
      let contentList = [];
      var arr = row;
      for (let i = 0; i < this.talkTableData.length; i++) {
        if (this.talkTableData[i] !== arr) {
          contentList.push(this.talkTableData[i]);
        }
      }
      globalsetEditChatTopic({
        content: contentList,
      }).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.globalsetChatTopic();
        }
      });
    },
    //新增
    addTalk() {
      if (this.input == "") {
        this.$message({
          type: "error",
          message: "输入内容不能为空！",
        });
        return;
      }
      this.talkTableData.push(this.input);
      globalsetEditChatTopic({
        content: this.talkTableData,
      }).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: "新增成功",
            type: "success",
          });
          this.input = "";
          this.globalsetChatTopic();
        }
      });
    },
    //约会时间
    engageTimeTimeList() {
      this.dateTimeLoading = true;
      engageTimeTimeList({}).then((res) => {
        if (res.code == 0) {
          this.dateTimeTableData = res.data;
          this.dateTimeLoading = false;
        }
      });
    },
    //删除
    engageTimeDelTimeListBtn(row) {
      this.$confirm("确认要删除此时间吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          engageTimeDelTimeList({
            id: row.id,
          }).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.engageTimeTimeList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //编辑
    engageTimeEditTimeListBtn(row) {
      if (row.sort == "" || row.timing == "") {
        this.$message({
          type: "error",
          message: "更新内容不能为空！",
        });
        return;
      }
      if (row.id == "") {
        engageTimeAddTimeList({
          sort: row.sort,
          timing: row.timing,
        }).then((res) => {
          if (res.code == 0) {
            this.$message({
              message: "新增成功",
              type: "success",
            });
            this.engageTimeTimeList();
          }
        });
      } else {
        engageTimeEditTimeList({
          id: row.id,
          sort: row.sort,
          timing: row.timing,
        }).then((res) => {
          if (res.code == 0) {
            this.$message({
              message: "更新成功",
              type: "success",
            });
            this.engageTimeTimeList();
          }
        });
      }
    },
    //新增
    addDateTimeBtn() {
      this.dateTimeTableData.unshift({
        id: "",
        sort: "",
        timing: "",
      });
    },
    //选项卡
    handleClick(tab) {
      console.log(tab.name);
      if (tab.index == 1) {
        this.globalsetChatTopic();
      }
      if (tab.index == 2) {
        this.engageTimeTimeList();
      } else if (tab.index == 3) {
        this.getPersonList();
      }
    },
  },
  created() {
    this.appointmentcardList();
  },
};
</script>

<style lang="less" scoped>
.ReservationCardManagement {
  margin: 30px;
  height: 100%;
  .classificationBox {
    margin-bottom: 40px;
    .btn {
      margin-top: 30px;
    }
    .box {
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        margin-right: 10px;
      }
    }
    .p {
      display: flex;
      p {
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
      .active {
        background-color: #0079fe;
        color: #fff;
        border-radius: 10px;
      }
    }

    .img {
      width: 80px;
      height: 80px;
      border-radius: 10px;
    }
    .classificationCardBox {
      display: flex;
      .item {
        height: 80px;
        margin-right: 50px;
        position: relative;
        .el-card__body {
          padding: 0px !important;
        }
        .p {
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 26px;
            height: 24px;
            margin-right: 4px;
          }
        }
        .el-icon-close {
          position: absolute;
          right: 0px;
          top: 0px;
          cursor: pointer;
          transition: all 0.6s;
        }
        .el-icon-close:hover {
          transform: scale(1.3);
        }
        .el-icon-plus {
          font-size: 22px;
          cursor: pointer;
          transition: all 0.6s;
        }
        .el-icon-plus:hover {
          transform: scale(1.3);
        }
        .editTitle {
          cursor: pointer;
        }
        .div {
          box-shadow: 0 2px 12px 0 #ccc;
          width: 120px;
          height: 60px;
          line-height: 60px;
          position: relative;
          .el-icon-close {
            position: absolute;
            top: 0px;
            right: 0px;
          }
        }
        .div:hover {
          color: #ec6564;
        }
      }
    }
    // /deep/ .el-input__inner {
    //   width: 50%;
    // }
    .el-dialog {
      .addCard {
        p {
          display: flex;
          .moodSpan {
            width: 80px;
            line-height: 40px;
          }
          .moodSpanB {
            width: 70px;
            line-height: 40px;
          }
          .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
          }
          .avatar-uploader .el-upload:hover {
            border-color: #409eff;
          }
          .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            border: 1px dashed #d9d9d9;
          }
          .avatar {
            width: 80px;
            height: 80px;
            display: block;
          }
          .colo_span {
            display: flex;
            align-items: center;
            margin-left: 6px;
          }
        }
      }
    }
    .el-table {
      margin-top: 40px;
    }
  }
  .addBox {
    display: flex;
    align-items: center;
    .el-input {
      width: 300px;
      margin: 0px 10px 0px 60px;
    }
    .btn {
      margin: 0px;
    }
  }
  .avatar {
    border: 1px dashed #ccc;
    padding: 5px;
  }
}
</style>